<template>
  <div class="app-container">
    <!--    <div class="filter-select">-->
    <!--      <el-row class="bg-white">-->
    <!--        <el-col :span="4">-->
    <!--          <h2>核验状态：</h2>-->
    <!--        </el-col>-->
    <!--        <el-col :span="20">-->
    <!--          <el-tabs v-model="activeName" @tab-click="handleClick">-->
    <!--            <el-tab-pane label="全部" name="first"></el-tab-pane>-->
    <!--            <el-tab-pane label="已核查" name="second"></el-tab-pane>-->
    <!--            <el-tab-pane label="未核查" name="third"></el-tab-pane>-->
    <!--          </el-tabs>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--    </div>-->

    <div class="filter-container">
      <el-card shadow="never" :body-style="{ border: 0 }">
        <el-form ref="searchform" :inline="true" :model="query" class="demo-form-inline" size="small">

          <el-form-item label="年：">
            <el-date-picker placeholder="选择年份" v-model="query.year" size="mediumn" value-format="yyyy" type="year"
                            style="margin-right:20px;width:100px">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="月/季度：">
            <el-select v-model="query.month" placeholder="请选择" size="medium" style="width:100px">
              <el-option label="一月" value="1"></el-option>
              <el-option label="二月" value="2"></el-option>
              <el-option label="三月" value="3"></el-option>
              <el-option label="第一季度" value="A"></el-option>
              <el-option label="四月" value="4"></el-option>
              <el-option label="五月" value="5"></el-option>
              <el-option label="六月" value="6"></el-option>
              <el-option label="第二季度" value="B"></el-option>

              <el-option label="七月" value="7"></el-option>
              <el-option label="八月" value="8"></el-option>
              <el-option label="九月" value="9"></el-option>
              <el-option label="第三季度" value="C"></el-option>

              <el-option label="十月" value="10"></el-option>
              <el-option label="十一月" value="11"></el-option>
              <el-option label="十二月" value="12"></el-option>
              <el-option label="第四季度" value="D"></el-option>

            </el-select>
          </el-form-item>
          <!-- <el-form-item label="季度：">
            <el-select v-model="jidu" placeholder="请选择" size="medium">
              <el-option label="第一季度" value="A"></el-option>
              <el-option label="第二季度" value="B"></el-option>
              <el-option label="第三季度" value="C"></el-option>
              <el-option label="第四季度" value="D"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="人员状态：">
            <el-select v-model="query.status" placeholder="请选择" size="medium" style="width:120px">
              <el-option label="未认证" value="0"></el-option>
              <el-option label="已认证" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="认证方式：">
            <el-select v-model="query.verType" placeholder="请选择" size="medium" style="width:120px">
              <el-option label="无感认证" value="0"></el-option>
              <el-option label="本人认证" value="1"></el-option>
              <el-option label="他人认证" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="姓名：">
            <el-input v-model="query.name" clearable placeholder="请输入人员名称" size="medium"
                      style="width:300px;margin-right:20px;width:130px" />
          </el-form-item>
          <el-form-item label="身份证：">
            <el-input v-model="query.idCard" clearable placeholder="请输入身份证号码" size="medium"
                      style="width:300px;margin-right:20px;width:160px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mediumn" @click="handleSearch()">查询</el-button>
            <el-button type="default" size="mediumn" @click="handleClean()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <el-card shadow="never" :body-style="{ border: 0 ,padding: '0 20px'}">
      <div class="list-btn-container">
        <el-row>
          <!-- <el-col :span="4"></el-col> -->
          <el-col :span="19">
            <div class="info" align="right">
              总人数<span class="col1">{{totalNumber}}</span>人，已完成验证<span class="col2">{{completeNumber}}</span>人，未验证<span
                class="col3">{{doingNumber}}</span>人
            </div>
          </el-col>
          <el-col :span="5" align="right">

            <el-button type="primary" icon="el-icon-plus" size="medium" @click="ShowEditOrViewDialog()"
                       v-if="user_level != 3">上报数据</el-button>
            <el-button type="primary" :loading="loadingbut" icon="el-icon-edit" size="medium" @click="exportExcel()" v-if="user_level != 3">
              {{loadingbuttext}}
            </el-button>

          </el-col>
        </el-row>


      </div>
      <el-table ref="gridtable" size="medium" v-loading="tableloading" :data="tableData" border stripe show-header
                highlight-current-row style="width: 100%" :default-sort="{ prop: 'SortCode', order: 'ascending' }">
        <el-table-column prop="id" align="center" label="序号" >
          <template scope="scope">
            <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" align="center" label="姓名" />
        <el-table-column prop="blockName" align="center" label="所属街道" />
        <el-table-column prop="communityName" align="center" label="所属社区" />
        <el-table-column prop="idCard" align="center" label="身份证">
          <template slot-scope="scope">
            {{scope.row.idCard? scope.row.idCard.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2"):""}}
          </template>
        </el-table-column>
        <el-table-column prop="status" align="center" label="认证状态">
          <template slot-scope="scope">
            <el-tag v-show="scope.row.status == 1" type="success">已认证</el-tag>
            <el-tag v-show="scope.row.status == 0" type="danger">未认证</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="verType" align="center" label="认证方式">
          <template slot-scope="scope">
            <div v-show="scope.row.verType == 0">
              <a :href="scope.row.voucherUrl" target="_blank">无感认证</a></div>
            <div v-show="scope.row.verType == 1">
              <a :href="scope.row.voucherUrl" target="_blank">本人认证</a>
            </div>
            <div v-show="scope.row.verType == 2"><a :href="scope.row.voucherUrl" target="_blank">他人认证</a></div>
          </template>
        </el-table-column>
        <el-table-column prop="otherName" align="center" label="他人认证姓名" />
        <el-table-column prop="authRemark" align="center" label="他人认证说明" />
        <el-table-column prop="verTime" align="center" label="认证时间" />
        <el-table-column align="center" label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-user-solid" @click="setStatus(scope,'1')" v-if="scope.row.status == 0">
              本人认证
            </el-button>
            <el-button type="text" icon="el-icon-user" style="color: #1BB358" @click="setStatus(scope,'2')"
                       v-if="scope.row.status == 0">他人认证
            </el-button>
            <el-button type="text" icon="el-icon-warning" style="color: red" @click="setStatus(scope,'-1')"
                       v-if="scope.row.status == 1">取消认证
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination background :current-page="pagination.currentPage"
                       :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400]" :page-size="query.pagesize"
                       layout="total, sizes, prev, pager, next, jumper" :total="pagination.pageTotal" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
      </div>
    </el-card>
    <el-dialog title="本人认证" align="center" :visible.sync="dialogVisible" width="300px" :before-close="handleClose">
      <vue-qr  :text="oUrl" :size="200"></vue-qr>
      <div align="center">
        {{now_name}}
      </div>
      <div align="center">
        {{now_idcard.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2")}}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="上报数据" :visible.sync="sqShow" width="500px" :before-close="handleClose">
      <div align="center">
        确定要上报<el-input class="shangbao" v-model="shangbao" disabled></el-input>吗？
      </div>
      <div align="left" style="padding-left:50px">确认后将提交街道进行审核</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="exportExcel2()" :loading="loadingbut1">{{loadingbuttext1}}</el-button>
        <el-button @click="sqShow = false">取 消</el-button>
        <el-button type="primary" @click="saveEditForm()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog ref="dialogEditForm" :title="editFormTitle" :visible.sync="editVisible" width="660px"
               append-to-body>
      <el-form ref="editFrom" :model="editFrom" :rules="rules">

        <el-form-item label="手动认证人姓名" :label-width="formLabelWidth" prop="otherName">
          <el-input v-model="editFrom.otherName" placeholder="请输入姓名" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="手动认证情况说明" :label-width="formLabelWidth" prop="authRemark">
          <el-input v-model="editFrom.authRemark" placeholder="请输入情况说明" autocomplete="off" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAuthForm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
import {
  fetchDataPost,
  fetchNumberDataPost,
  fetchCreatGet,
  certificationPost,
  exportExc,
  sqShangbao,
  jdShangbao,
  taskInfo
} from '../../../api/verification';
var queryRequest = {
  url: "/verfication/verfication/page-list"
};
var createRequest = {
  url: "/verfication/verfication/create/{id}"
};
export default {
  name: 'digitalcertificate', // 需与菜单的功能编码一致
  components: {vueQr},
  data() {
    //获取当年
    var date = new Date();

    var year = date.getFullYear();
    var mouth = date.getMonth();
    mouth = mouth + 1;
    //获取当月
    return {
      dialogVisible: false,
      loadingbuttext:'导出数据',
      loadingbuttext1:'查看呈报内容',
      loadingbut:false,
      loadingbut1:false,
      searchform: {
        keywords: '',
        realname: '',
        nickname: '',
        mobilephone: '',
        email: '',
        wechat: '',
        deptIds: ''
      },
      tableData: [],
      tableloading: true,
      pagination: {
        currentPage: 1,
        pagesize: 20,
        pageTotal: 0
      },
      sortableData: {
        order: 'desc',
        sort: 'CreatorTime'
      },
      activeName: 'first',
      dialogEditFormVisible: false,
      editVisible: false,
      editFormTitle: '',
      editFrom: {
        otherName: '',
        authRemark: '',
        id: '',
        verType: ''
      },
      rules: {},
      formLabelWidth: '180px',

      query: {
        phone: '',
        name: '',
        status: '',
        verType: '',
        username: '',
        enable: '',
        pageNum: 1,
        pageSize: 10,
        month: mouth.toString(),
        year: year.toString(),
        // jidu: ''
      },
      // jidu: '',
      month: '',
      totalNumber: 0,
      completeNumber: 0,
      doingNumber: 0,
      imgSrc: "./assets/img/erweima.png",
      user_level: 0,
      // jdShow: false,
      sqShow: false,
      shangbao: '',
      shangbaoData: [],
      tableRadio: '',
      oUrl: '',
      now_name: '',
      now_idcard: '',
      userId: ''
    }
  },
  mounted() {
    console.log(localStorage.getItem('level'), '2323')
    this.user_level = localStorage.getItem('level')
  },
  created() {
    this.userId = localStorage.getItem('userid')
    queryRequest.data = this.query;
    this.getData();
    this.InitDictItem()
  },
  methods: {

    clickChange(item) {
      this.tableRadio = item.taskId
    },
    handleClose(done) {
      done();
    },
    exportExcel() {
      let param = this.query
      if (this.query.year == '' || this.query.month == '') {
        this.$message({
          message: '请时间筛选',
          type: 'error'
        })
        return false
      }
      this.loadingbut = true;
      this.loadingbuttext = '导出中';
      exportExc(param).then(res => {
        let data = res
        if (!data) {
          this.loadingbut = false;
          this.loadingbuttext = '导出数据';
          return
        }

        let url = window.URL.createObjectURL(new Blob([data]))
        let a = document.createElement('a')
        a.style.display = 'none'
        a.href = url
        a.setAttribute('download', 'excel.xls')
        document.body.appendChild(a)
        a.click() //执行下载
        window.URL.revokeObjectURL(a.href)
        document.body.removeChild(a)
        this.loadingbut = false;
        this.loadingbuttext = '导出数据';
        this.$message.success('导出成功!')
      });

    },
    exportExcel2() {
      this.loadingbut1 = true;
      this.loadingbuttext1 = '导出中';
      let param = {'year':this.query.year,'month':this.query.month}
      exportExc(param).then(res => {
        let data = res
        if (!data) {
          return
        }

        let url = window.URL.createObjectURL(new Blob([data]))
        let a = document.createElement('a')
        a.style.display = 'none'
        a.href = url
        a.setAttribute('download', 'excel.xls')
        document.body.appendChild(a)
        a.click() //执行下载
        window.URL.revokeObjectURL(a.href)
        document.body.removeChild(a)
        this.loadingbut1 = false;
        this.loadingbuttext1 = '查看呈报内容';
        this.$message.success('导出成功!')
      });

    },
    // //认证
    // beforeHandleCommand(scope,command){
    //   return {
    //       'scope':scope,
    //       'command':command
    //     }
    // },
    setStatus(scope, command) {
      let param = []
      param.data = {
        id: scope.row.id,
        verType: command
      }
      let that = this
      if (command == 2) {
        var title = `正在为（` + scope.row.name + `）进行认证`;
        this.editFormTitle = title;
        this.editVisible = true;
        this.editFrom.id = scope.row.id;
        this.editFrom.verType = command;

      } else {
        if (command == 1) {
          that.oUrl = 'https://h5.tfsmy.nanqiao.openviewtech.com/#/?helpUserId=' + this.userId + '&name=' + scope.row.name + '&idCard='+scope.row.idCard
          that.dialogVisible = true,
              that.now_name = scope.row.name;
          that.now_idcard = scope.row.idCard;

        } else {
          certificationPost(param).then(res => {
            that.$message.success(res.message)
            that.getData()
            that.InitDictItem()
          });
        }
      }

    },
    saveAuthForm(){
      let that = this
      let param = []
      param.data = {
        id: this.editFrom.id,
        verType: this.editFrom.verType,
        otherName: this.editFrom.otherName,
        authRemark: this.editFrom.authRemark,
      }
      if(!this.editFrom.id){
        that.$message.error("非法操作");
        return false;
      }
      if(this.editFrom.verType!=2){
        that.$message.error("非法操作");
        return false;
      }
      if(!this.editFrom.otherName){
        that.$message.error("请输入姓名");
        return false;
      }
      if(!this.editFrom.authRemark){
        that.$message.error("请输入情况说明");
        return false;
      }

      certificationPost(param).then(res => {
        that.editVisible = false;
        if(res.code==0){
          that.$message.success("认证成功")
          that.getData()
          that.InitDictItem()
        }else{
          that.$message.error(res.message)
        }


      });
    },
    // 获取数据
    getData() {
      //获取居民列表
      fetchDataPost(queryRequest).then(res => {
        this.tableloading = false
        this.tableData = res.data.list;
        this.pagination.pageTotal = res.data.total;
      });
    },
    handleClick(tab, event) {
      let status = ''
      if (tab.index == 2) {
        status = 0
      } else if (tab.index == 1) {
        status = 1
      }
      this.query.status = status
      this.getData()
    },
    setSystemAdmin(rowData) {
      console.log(rowData)
      const postData = {
        account: rowData.username,
        creatoruserid: this.$store.state.user.userid,
        deletemark: false,
        enabledmark: true,
        id: 0,
        isadministrator: true,
        ismember: true,
        membergradeid: this.searchform.deptIds[this.searchform.deptIds.length - 1],
        mobilephone: rowData.username,
        nickname: rowData.username,
        organizeid: this.searchform.deptIds[this.searchform.deptIds.length - 1],
        realname: rowData.realname,
        referraluserid: rowData.id,
        securitylevel: 0,
        roleid: '5'
      }
      modifySystemAdmin(postData).then((res) => {

        if (res.data) {
          this.$message.success('设置成功!')
          // this.loadTableData()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    /**
     * 初始化数据
     */
    InitDictItem() {
      fetchNumberDataPost().then(res => {
        this.totalNumber = res.data.totalNumber
        this.completeNumber = res.data.completeNumber
        this.doingNumber = res.data.doingNumber
      });
      createRequest.id = 0
      fetchCreatGet(createRequest).then(res => {
        console.log(res)
      });
    },

    // 取消按钮
    cancel() {
      this.dialogEditFormVisible = false
      // this.reset()
    },
    // 表单重置
    reset() {
      this.editFrom = {

      }
      // this.resetForm('editFrom')
    },

    handleClean: function () {
      this.query = {
        phone: '',
        name: '',
        username: '',
        status: '',
        pageNum: 1,
        pageSize: 10,
        year: '',
        month: '',
        // jidu: ''
      }
      queryRequest.data = this.query
      this.getData()
    },

    /**
     * 点击查询
     */
    handleSearch: function () {
      this.getData()
    },

    /**
     * 新增、修改或查看明细信息（绑定显示数据）     *
     */
    ShowEditOrViewDialog: function (view) {
      //0-民政 1-街道 2-社区
      if (this.query.year == '' || this.query.month == '') {
        this.$message({
          message: '请时间筛选',
          type: 'error'
        })
        return false
      }
      let op = ''
      if (this.query.month == 'A') {
        op = '第一季度'
      } else if (this.query.month == 'B') {
        op = '第二季度'
      } else if (this.query.month == 'C') {
        op = '第三季度'
      } else if (this.query.month == 'D') {
        op = '第四季度'
      } else {
        op = '-' + this.query.month + '月'
      }
      // if (this.user_level == 1) {
      //   this.jdShow = true
      //   taskInfo({
      //     year: this.query.year,
      //     month: this.query.month
      //   }).then((res) => {
      //     this.shangbaoData = res.data
      //   })
      // } else if (this.user_level == 2) {
      this.sqShow = true
      this.shangbao = this.query.year + '年' + op
      // }
    },
    bindEditInfo: function () {
      getSys_userDetail(this.currentId).then((res) => {
        this.editFrom = res.data
        // 需个性化处理内容
      })
    },

    /**
     * 新增/修改保存
     */
    saveEditForm() {

      sqShangbao({
        year: this.query.year,
        month: this.query.month
      }).then(res => {
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.sqShow = false
      });

    },
    setEnable: function (val) {
      if (this.currentSelected.length === 0) {
        this.$alert('请先选择要操作的数据', '提示')
        return false
      } else {
        var currentIds = []
        this.currentSelected.forEach((element) => {
          currentIds.push(element.Id)
        })
        const data = {
          Ids: currentIds,
          Flag: val
        }
        setSys_userEnable(data).then((res) => {
          if (res.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.currentSelected = ''
          } else {
            this.$message({
              message: res.message,
              type: 'error'
            })
          }
        })
      }
    },
    deleteSoft: function (val) {
      if (this.currentSelected.length === 0) {
        this.$alert('请先选择要操作的数据', '提示')
        return false
      } else {
        const that = this
        this.$confirm('是否确认删除所选的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(function () {
              var currentIds = []
              that.currentSelected.forEach((element) => {
                currentIds.push(element.Id)
              })
              const data = {
                Ids: currentIds,
                Flag: val
              }
              return deleteSoftSys_user(data)
            })
            .then((res) => {
              if (res.code === 200) {
                that.$message({
                  message: '删除成功',
                  type: 'success'
                })
                that.currentSelected = ''
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              }
            })
      }
    },
    deletePhysics: function () {
      if (this.currentSelected.length === 0) {
        this.$alert('请先选择要操作的数据', '提示')
        return false
      } else {
        const that = this
        this.$confirm('是否确认删除所选的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(function () {
              var currentIds = []
              that.currentSelected.forEach((element) => {
                currentIds.push(element.Id)
              })
              const data = {
                Ids: currentIds
              }
              return deleteSys_user(data)
            })
            .then((res) => {
              if (res.code === 200) {
                that.$message({
                  message: '删除成功',
                  type: 'success'
                })
                that.currentSelected = ''
              } else {
                this.$message({
                  message: res.message,
                  type: 'error'
                })
              }
            })
      }
    },

    /**
     * 选择每页显示数量
     */
    handleSizeChange(val) {
      this.query.pageSize = val
      this.query.currentPage = 1
      this.getData()
    },
    /**
     * 选择当页面
     */
    handleCurrentChange(val) {
      this.query.pageNum = val
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #fcf9fc;
}

.el-card {
  border: 0;
  background-color: #fcf9fc;
  box-shadow: 0 !important;
}

.el-table {
  border-radius: 10px;
}

.bg-white {
  background-color: #ffffff;
  height: 119px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #CCCCCC;
}

.filter-select {
  height: 119px;
  overflow: hidden;
  position: relative;

  h2 {
    height: 119px;
    line-height: 119px;
    font-size: 28px;
    color: #333333;
    font-weight: 400x;
    padding-left: 24px;
  }
}

.el-tabs {
  font-size: 22px;
  color: #999999;
  font-weight: 400;
  height: 80px;
  line-height: 80px;
  margin-top: 15px;
}

.list-btn-container .info {
  height: 40px;
  line-height: 40px;

  font-size: 18px;
  font-weight: 400;
  color: #333333;
}

.list-btn-container button {
  border-radius: 10px;
}

.col1 {
  color: #4940FD;
}

.col2 {
  color: #09B76E;
}

.col3 {
  color: #F66A55;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.shangbao {
  display: inline-block;
  width: 220px;
  padding: 10px 20px;
}
</style>